<template>
  <div>
    <kendo-notification
      ref="notification"
      :allow-hide-after="3000"
      :auto-hide-after="3000"
      :button="true"
      :hide-on-click="true"
      :position-top="30"
      :position-pinned="true"
      :position-right="30"
      stacking="down"
      :templates="templates"
    />
  </div>
</template>
<script>
  import { Notification } from '@progress/kendo-popups-vue-wrapper'

  export default {
    components: {
      'kendo-notification': Notification
    },
    data() {
      return {
        option: {
          title: '',
          message: ''
        },
        templates: [
          {
            type: 'warning',
            template: `<div class="warning">
						<span class="k-icon k-i-warning" ></span>
						<h3>#= title #</h3>
						<p>#= message #</p>
		   			  </div>`
          },
          {
            type: 'error',
            template: `<div class="error">
						<span class="k-icon k-i-error" ></span>
            <h3>#= title #</h3>           
						<p>#= message #</p>
		   			  </div>`
          },
          {
            type: 'success',
            template: `<div class="success">
						<span class="k-icon k-i-success" /></span>
						<h3>#= title #</h3>
						<p>#= message #</p>
		   			  </div>`
          }
        ]
      }
    },
    mounted() {
      this.notification = this.$refs.notification.kendoWidget()
    },
    methods: {
      messageDialog(val) {
        console.log(val)
      }
    }
  }
</script>
<style>
.demo-section p {
  margin: 3px 0 20px;
  line-height: 50px;
}
.demo-section .k-button {
  width: 250px;
}

/* Notifications */
.k-notification-warning {
  border-color: #f2c308;
  color: #ffffff;
  background-color:#d39d09;
  bottom:2px ;
  border-radius: 8px;
  font-family: cursive;
  font-size: 600;
}
.k-notification-success {
  border-color: #217a04;
  color: #ffffff;
  background-color: #217a04;
  margin-bottom:2px ;
  border-radius: 8px;
}
.k-notification-error {
  border-color: #c80606;
  color: #ffffff;
  background-color: #c80606;
  bottom:2px ;
  border-radius: 8px;
}
.k-notification h3 {
  padding: 15px 10px 5px;
  font-size: 1.1em;
  line-height: normal;
  font-family: cursive;
}
.k-notification p {
  margin-left: 40px;
  font-family: cursive;
  font-weight: 600;
}
.k-notification span {
    margin: 10px 10px 0px 10px;
    float: left;
    font-size: 24px;
}

/* Info template */
.warning {
  width: 300px;
  height: 100px;
}

/* Error template */
.error {
  width: 300px;
  height: 100px;
}

/* Success template */
.success {
  width: 300px;
  height: 100px;
}

/* For Bootstrap v4 theme */
.k-bootstrap-v4 .k-notification h3 {
  padding: 10px 10px 5px;
}
.k-bootstrap-v4 .k-notification span {
  margin: 10px 20px 0 0;
}
.k-bootstrap-v4 .new-mail,
.k-bootstrap-v4 .wrong-pass,
.k-bootstrap-v4 .upload-success {
  width: calc(300px - 2.5rem);
  height: calc(100px - 1.5rem);
}

/* For Material v2 theme */
.k-material-v2 .k-notification h3 {
  padding: 10px 10px 5px;
}
.k-material-v2 .k-notification span {
  margin: 10px 20px 0 0;
}
.k-material-v2 .new-mail,
.k-material-v2 .wrong-pass,
.k-material-v2 .upload-success {
  width: 270px;
  height: 70px;
}
</style>
